<!DOCTYPE HTML>
<html>
	<head>
		<style>
			body {
				margin: 0px;
				padding: 0px;
			}
			#ball {
				background: red;
				width: 50px;
				height: 50px;
				border-radius: 50px;
				position: relative;
			}
			#line {
				background: blue;
				width: 5px;
				height: 200px;
				top: 0px;
				left: 250px;
				position: absolute;
			}
		</style>
		<script src="jquery-2.0.2.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="ball">

			<script>
				// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
				// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

				// requestAnimationFrame polyfill by Erik Möller
				// fixes from Paul Irish and Tino Zijdel

				( function() {
						var lastTime = 0;
						var vendors = ['ms', 'moz', 'webkit', 'o'];
						for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
							window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
							window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
						}

						if (!window.requestAnimationFrame)
							window.requestAnimationFrame = function(callback, element) {
								var currTime = new Date().getTime();
								var timeToCall = Math.max(0, 16 - (currTime - lastTime));
								var id = window.setTimeout(function() {
									callback(currTime + timeToCall);
								}, timeToCall);
								lastTime = currTime + timeToCall;
								return id;
							};

						if (!window.cancelAnimationFrame)
							window.cancelAnimationFrame = function(id) {
								clearTimeout(id);
							};
					}());

				// Properties _____________________________________________

				var ball = $('#ball');
				body = document.getElementsByTagName('body')[0];
				var divLine = document.createElement('div');
				body.appendChild(divLine);
				divLine.id = 'line';
				var line1 = $('#line');

				var posY = 0;
				var posX = 0;
				var speed = 2;
				var fps = 50;
				var interval = 1000 / fps;
				var t = 0;
				var dt = 0.1;
				var phi;
				var phi_0 = 0.2 * Math.PI;
				var g = 9.81;
				var l = 200;
				var omega_0 = Math.sqrt(g / l);
				var dot_phi_0 = 0;
				var posXLine = 0;
				var dyLine = 0;
				//console.log(posX_max,posY_max)
				// Animation Logic ________________________________________
				function draw() {
					setTimeout(function() {
						window.requestAnimationFrame(draw);

						t += dt;
						phi = phi_0 * Math.cos(omega_0 * t) + (dot_phi_0 / omega_0) * Math.sin(omega_0 * t);
						posY = l * Math.cos(phi);
						//ytranspose = -posY*100/l;
						//posY = ((dy/100)*ytranspose) + yt
						posX = l * Math.sin(phi) + 250;

						ball.css({
							'top' : posY + 'px',
							'left' : posX + 'px'
						});
						posXLine = Math.tan(phi) * l / 2 + 250;
						dyLine = (l / 2) * (1 - Math.cos(phi));
						line1.css({
							'transform' : 'rotate(' + -phi * 180 / Math.PI + 'deg)',
							'left' : posXLine + 'px',
							'top' : (0 - dyLine) + 'px'
						});
					}, interval);
				}

				draw();
				/*for (var i = 0; i < 100; i++)
				 {
				 t += dt;
				 phi = phi_0 * Math.cos(omega_0 * t) + (dot_phi_0 / omega_0) * Math.sin(omega_0 * t);
				 console.log( Math.tan(phi) * l / 2)
				 }*/
			</script>
		</div>
	</body>
</html>